<template>
	<div id="app">
		<h3 id="title">光伏电站监控管理系统-后台管理</h3>
		<el-container>
			<el-header>
				<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
					<!-- <el-menu-item index="1" @click="findEquipment">功能1-查看设备类别</el-menu-item> -->
					<el-submenu index="1">
						<template slot="title">设备管理</template>
						<el-menu-item index="/adminIndex">查看所有设备</el-menu-item>
						<el-menu-item index="addequip">添加设备信息</el-menu-item>
						<!-- <el-menu-item index="updateEquipment">更改设备信息</el-menu-item> -->
						<!-- <el-menu-item index="underequip">下架设备</el-menu-item> -->
						<!-- <el-menu-item index="upEquipment" >上架设备</el-menu-item> -->
						<el-menu-item index="findEquipmentById">输入设备编号查看</el-menu-item>
						<!-- <el-menu-item index="findByExample">分类查看设备</el-menu-item> -->
						<el-menu-item index="deleteEquipment">删除设备</el-menu-item>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title">用户管理</template>
						<el-menu-item index="allUser">查看所有用户</el-menu-item>
						<el-menu-item index="userInformationChart">用户信息可视化大屏</el-menu-item>

					</el-submenu>
					<el-submenu index="3">
						<template slot="title">公告管理</template>
						<el-menu-item index="allNotice">查看所有公告信息</el-menu-item>
						<el-menu-item index="addNotice">增加公告信息</el-menu-item>
						<!-- <el-menu-item index="updateNotice">更改公告信息</el-menu-item> -->
						<el-menu-item index="deleteNotice">删除公告信息</el-menu-item>
					</el-submenu>

					<!-- <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
					<el-submenu index="4">
						<template slot="title">员工管理</template>
						<el-menu-item index="allStaffs" @click="">查看所有员工信息</el-menu-item>
						<el-menu-item index="addStaffs" @click="">新增员工信息</el-menu-item>
						<!-- <el-menu-item index="updateStaffs" @click="">更改员工信息</el-menu-item> -->
						<el-menu-item index="deleteStaffs" @click="">删除员工信息</el-menu-item>
					</el-submenu>
					<el-submenu index="5">
						<template slot="title">订单管理</template>
						<el-menu-item index="unprocessedOrders" >未处理订单</el-menu-item>
						<!-- <el-menu-item index="cancelledOrders" >取消的订单</el-menu-item> -->
						<el-menu-item index="historicalOrders" >历史订单</el-menu-item>
						<el-menu-item index="dailyOrders" >当日订单</el-menu-item>
						<el-menu-item index="ordersInformationChart" >订单信息可视化大屏</el-menu-item>
					</el-submenu>
					<el-submenu index="6">
						<template slot="title">用户设备管理</template>
						<el-menu-item index="allUsersEquipments" >查询所有用户设备</el-menu-item>
						<el-menu-item index="abnormalEquipment" >异常设备</el-menu-item>
						<!-- <el-menu-item index="usersEquipmentsStatus" >用户设备工作状态</el-menu-item> -->
						<el-menu-item index="usersEquipmentsInformationChart" >用户设备信息可视化大屏</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-header>
			<el-container>
				<!-- 				<el-aside width="200px" :style="aside">
					<el-submenu></el-submenu>
				</el-aside> -->
				<el-container>
					<el-main :style="main">
						<router-view></router-view>
					</el-main>
					<el-footer :style="footer"></el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import request from '../utils/axios/request.js';
	export default {
		data() {

			return {
				activeIndex2: '1-1',
				// aside: {
				// 	height: "500px",
				// 	background: "#fa0000"

				// },
				main: {
					background: "#f0f0f0"
				},
				footer: {
					background: "#e5e03a"
				},

			}
		},
		methods: {
			handleSelect(key, keyPath) {
				this.$router.push({
					path: key,
					params: {
						data: ''
					}
				})
				console.log(key, keyPath);
			},

			underEquipment: function() {
				this.$router.push('/adminIndex/underequip')
			},
			updateEquipment: function() {
				this.$router.push('/adminIndex/updateEquipment')
			},

			findByExample: function() {
				this.$router.push('/adminIndex/findByExample')
			},

		},


	};
</script>

<style>
	#title {
		margin-top: 5px;
		background-color: #ffffff;
		margin-bottom: 5px;
	}

	.el-header {
		background-color: #434142;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
</style>